import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import CSSModules from 'react-css-modules';
import {
  List,
  Card,
  Row,
  Col,
  Button,
  Menu,
  Icon,
  Dropdown,
  Tag,
  Avatar,
  Popconfirm,
} from 'antd';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';

import styles from './index.less';

const {Description} = DescriptionList;
const ButtonGroup = Button.Group,
  titleMaxLength = 30;

class CommentItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}
  handleCheckData = () => {
    const {onCheckData} = this.props;
    onCheckData && onCheckData();
  };
  handleDeleteComment = () => {
    const {onDelete, id} = this.props;
    onDelete && onDelete(id);
  };
  render() {
    const {id, view, reason, href, content, channelName, type} = this.props;

    const ListExtraButtons = ({data: {id}}) => {
      return (
        <div className={styles.listItemExtra}>
          <ButtonGroup>
            <Popconfirm
              title="确认该条评论因违反《社区规范》而将其删除?"
              okText="确认"
              cancelText="取消"
              onConfirm={this.handleDeleteComment}>
              <Button type="danger" size="large">
                删除评论
              </Button>
            </Popconfirm>
          </ButtonGroup>
          <p />
          <ButtonGroup />
        </div>
      );
    };

    const ListContent = ({data: {avatarUrl, createTime, nickName}}) => (
      <div className={styles.listContent}>
        <div className={styles.extra}>
          <Avatar size="large" src={avatarUrl} />
          {nickName}&nbsp;发布在<em>{createTime}</em>
        </div>
      </div>
    );

    return (
      <List.Item key={id} extra={<ListExtraButtons data={this.props} />}>
        <List.Item.Meta
          title={
            <a className={styles.listItemMetaTitle}>
              {content.length > titleMaxLength
                ? `${content.substr(0, titleMaxLength)}...`
                : content}
            </a>
          }
        />
        <ListContent data={this.props} />
      </List.Item>
    );
  }
}

export default CSSModules(CommentItem, styles);
